<template>
  <Card class="v-storeSexRatio">
      <p slot="title">到店性别比例</p>
      <div slot="extra">
          <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
            <span @click="handleOpen">
                门店筛选
                <Icon type="arrow-down-b"></Icon>
            </span>
            <DropdownMenu slot="list">
                <CheckboxGroup v-model="areaNameCheck">
                    <Checkbox v-for="(item, index) in searchAreas" :label="item.areaName" :key="index"></Checkbox>
                </CheckboxGroup>
                <div style="text-align: right; margin:10px;">
                    <Button type="primary" @click="handleSubmit">确定</Button>
                </div>
            </DropdownMenu>
          </Dropdown>
      </div>
      <ul class="v-storeSexRatio-ul">
        <li v-for="(item, index) in sexualDate" :key="index">
          <span class="v-storeSexRatio-name fl">{{ item.AreaName }}</span>
          <img class="v-males-img fl" src="../assets/males.png" alt="">
          <div class="v-man" ref="man">
            <div class="v-males fl" :style="{width:(item.males / item.enters * 100).toFixed(2) + '%'}">{{ (item.males / item.enters * 100).toFixed(2) }}%&nbsp;&nbsp;</div>
            <div class="v-females fr" :style="{width:(100 - item.males / item.enters * 100).toFixed(2) + '%'}">&nbsp;&nbsp;{{ (100 - item.males / item.enters * 100).toFixed(2) }}%</div>
          </div>
          <img class="v-females-img" src="../assets/females.png" alt="">
        </li>
      </ul>

      <div class="v-age-level">
        <p class="v-age-level-title">到店年龄层比例</p>
        <ul class="v-age-level-bar-list">
          <li v-for="(item, index) in sexualDate" :key="index">
            <span class="v-age-level-bar-name fl">{{ item.AreaName }}</span>
            <p class="v-age-level-bar">
              <span v-if="item.age1 !== 0" class="v-age-level-bar1" :style="{width:(item.age1 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) + '%'}">
                {{ (item.age1 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) }}%
              </span>
              <span v-if="item.age2 !== 0" class="v-age-level-bar2" :style="{width:(item.age2 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) + '%'}">
                {{ (item.age2 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) }}%
              </span>
              <span v-if="item.age3 !== 0" class="v-age-level-bar3" :style="{width:(item.age3 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) + '%'}">
                {{ (item.age3 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) }}%
              </span>
              <span v-if="item.age4 !== 0" class="v-age-level-bar4" :style="{width:(item.age4 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) + '%'}">
                {{ (item.age4 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2) }}%
              </span>
              <span v-if="item.age5 !== 0" class="v-age-level-bar5" :style="{width:(((10000 - 100 * ((item.age4 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age3 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age2 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age1 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2))) / 100)).toFixed(2) + '%'}">
                {{ (((10000 - 100 * ((item.age4 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age3 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age2 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2)) - 100 * ((item.age1 / (item.age1 + item.age2 + item.age3 + item.age4 + item.age5) * 100).toFixed(2))) / 100)).toFixed(2) }}%
              </span>
            </p>
          </li>
        </ul>
        <ul class="v-age-level-lenged">
          <li class="v-age-level-1"><span></span>0-18岁</li>
          <li class="v-age-level-2"><span></span>19-30岁</li>
          <li class="v-age-level-3"><span></span>31-40岁</li>
          <li class="v-age-level-4"><span></span>41-50岁</li>
          <li class="v-age-level-5"><span></span>51岁及以上</li>
        </ul>
      </div>
  </Card>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "v-storeSexRatio",
  props: {
  },
  data () {
    return {
      sexualDate: [],
      searchAreas: [],
      areaName: '',
      areaCode: '',
      visible: false,
      areaNameCheck: []
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      getAjaxParams: state => state.timeParams
    })
  },
  watch: {
    getAjaxParams(val) {
      if (this.areaCode !== '') {
        this.SexualDate(Object.assign({}, val, {areaCodes: this.areaCode}))
        this.$store.dispatch('SetDownLink', Object.assign({}, val, {areaCodes: this.areaCode}))
      }
    }
  },
  created () {
    this.SearchAreas()
  },
  methods: {
    SexualDate (params) {
      this.$store.dispatch('SexualDate', params).then((res) => {
        if (res.success === '1') {
          this.sexualDate = res.data
        }
      })
    },
    SearchAreas () {
      this.$store.dispatch('SearchAreas').then((res) => {
        if (res.success === '1') {
          this.searchAreas = res.data
          let _areaNameCheck = []
          let _areaCode = []
          this.searchAreas.map((item) => {
            _areaNameCheck.push(item.areaName)
            _areaCode.push(item.areaCode)
          })
          this.areaNameCheck = _areaNameCheck
          this.areaCode = _areaCode.join(',')
          this.areaName = this.areaNameCheck.join(',')
          this.SexualDate(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
        }
      })
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      let _areaCode = []
      this.areaNameCheck.map((item) => {
        this.searchAreas.map((subItem) => {
          if (item === subItem.areaName) {
            _areaCode.push(subItem.areaCode)
          }
        })
      })
      this.areaName = this.areaNameCheck.join(',')
      this.areaCode = _areaCode.join(',')
      this.SexualDate(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.visible = false
    }
  }
};
</script>

<style lang="less">
.v-storeSexRatio {
  .v-dropdown {
    text-align: right
  }
  .ivu-dropdown-menu {
    width: 240px;
    padding: 10px 15px;
  }
  .ivu-checkbox-group {
    text-align: left;
  }
  .ivu-card-head p, .ivu-card-head-inner {
    height: 32px;
    line-height: 32px;
    font-size: 24px;
  }
  .ivu-card-head {
    padding: 30px 20px;
    border-bottom: none;
  }
  .v-storeSexRatio-ul {
    margin-bottom: 120px;
  }
  .v-storeSexRatio-ul li {
    display: block;
    height: 41px;
    line-height: 41px;
    position: relative;
    margin: 38px 94px 38px 120px;
    list-style: none;
    .v-storeSexRatio-name {
      width: 100px;
      margin-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .v-males-img, .v-females-img {
      width: 41px;
      height: 41px;
    }
    .v-females-img {
      position: absolute;
      top: 0;
      right: 0;
    }
    .v-man {
      color: #fff;
      margin-left: 190px;
      margin-right: 70px;
      height: 41px;
      padding-top: 15px;
      font-size: 12px;
      .v-males {
        height: 16px;
        line-height: 15px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #4096e6;
        text-align: right;
      }
      .v-females {
        height: 16px;
        line-height: 15px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #f14b79;
        text-align: left;
      }
    }
  }
}
.v-age-level {
  .v-age-level-title {
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    width: 100%;
    color: #1c2438;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .v-age-level-lenged {
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin: 70px 0;
    li {
      display: inline-block;
      width: 106px;
      margin: 0 30px;
      text-align: left;
      span {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
    .v-age-level-1 span {
      background-color: #eab54d;
    }
    .v-age-level-2 span {
      background-color: #ef8f52;
    }
    .v-age-level-3 span {
      background-color: #df5879;
    }
    .v-age-level-4 span {
      background-color: #ac6af0;
    }
    .v-age-level-5 span {
      background-color: #7a94f5;
    }
  }
  .v-age-level-bar-list {
    list-style: none;
    margin: 0 30px 0 120px;
    .v-age-level-bar-name {
      width: 100px;
      margin-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .v-age-level-bar {
      color: #fff;
      margin-top: 40px;
      margin-right: 70px;
      margin-left: 120px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      box-sizing: border-box;
      span {
        float: left;
        height: 20px;
        box-sizing: border-box;
        border-left: 1px solid #fff;
      }
      span:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      span:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }
    .v-age-level-bar1 {
      background-color: #eab54d;
    }
    .v-age-level-bar2 {
      background-color: #ef8f52;
    }
    .v-age-level-bar3 {
      background-color: #df5879;
    }
    .v-age-level-bar4 {
      background-color: #ac6af0;
    }
    .v-age-level-bar5 {
      background-color: #7a94f5;
    }
  }
}
</style>
